<!DOCTYPE html>
<html class="google" lang="en">
  <head>
    <base href="{{ gcb_course_base }}" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>{{ header_title }}</title>

    {% if can_highlight_code and sections %}
      <!-- import CodeMirror -->
      <script src="/static/codemirror/lib/codemirror.js"></script>
      <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
      <script src="/static/codemirror/addon/mode/loadmode.js"></script>
      <link rel="stylesheet" href="/modules/code_tags/resources/code_tags.css">
    {% endif %}

    <!-- import jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!--  import jQueryUI -->
    <link rel="stylesheet" type="text/css"
        href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

    <link rel="stylesheet" type="text/css"
        href="/modules/dashboard/resources/material-design-icons/css/material-design-iconic-font.min.css">

    <script src="/modules/oeditor/resources/butterbar.js"></script>
    <script src="/modules/dashboard/resources/js/view.js"></script>

    <link rel="stylesheet" type="text/css"
        href="/modules/oeditor/resources/butterbar.css" media="screen" />
    <link rel="stylesheet" type="text/css"
        href="/modules/dashboard/resources/css/view.css"/>

    {% for href in extra_css_href_list %}
      <link rel="stylesheet" type="text/css" href="{{ href }}">
    {% endfor %}

    {% for href in extra_js_href_list %}
      <script src="{{ href }}"></script>
    {% endfor %}

    {% if alerts %}
      <script>
        $(function() {
          cbShowAlert("{{ alerts | js_string }}");
        });
      </script>
    {% endif %}
  </head>
  <body>
  {% for header in page_headers %}
    {% if header %}{{ header }}{% endif %}
  {% endfor %}
  <table class="gcb-nav-bar">
    {% for nav in top_nav %}
      <tr class="gcb-nav-bar-level-{{ loop.index }}">
        {% if loop.index == 1 %}
          <td class="gcb-nav-bar-extras">
            {% if course_title %}
              <a id="gcb-course-picker" href="#">
                <span>Course Builder: </span>
                <span class="course-title">{{ course_title }}</span>
                <span class="down-arrow"></span>
              </a>
            {% else %}
              Course Builder
            {% endif %}
          </td>
          <td class="gcb-nav-bar-links">{{ nav }}</td>
          <td class="gcb-nav-bar-extras">{{ user_nav }}</td>
        {% else %}
          <td class="gcb-nav-bar-links" colspan="3">{{ nav }}</td>
        {% endif %}
      </tr>
    {% endfor %}
  </table>
  {{ course_picker }}
  <div id='gcb-main-area'>
    <!-- ButterBar -->
    <div class="gcb-butterbar-container">
      <div id="gcb-butterbar-top" class="gcb-butterbar gcb-butterbar-dashboard">
        <p id="gcb-butterbar-message"></p>
        <a id="gcb-butterbar-close">X</a>
      </div>
    </div>

    {% if page_description %}
      <p class="page-description">
        {{ page_description }}
      </p>
    {% endif %}
    {% if sections %}
    <div id='gcb-main-content'>
      {% for section in sections %}
      <div id='gcb-section'>
        {% for action in section.actions %}
          {% if action.href %}
          <a id='{{ action.id }}' class="gcb-button gcb-pull-right" role="button"
              href="{{ action.href }}" >{{ action.caption }}</a>
          {% else %}
          <form id='{{ action.id }}' action='{{ action.action }}' method='POST'>
            <input type="hidden" name="xsrf_token" value="{{ action.xsrf_token }}">
            {% if action.params %}
              {% for name, value in action.params.iteritems() %}
                <input type="hidden" name="{{ name }}" value="{{ value }}">
              {% endfor %}
            {% endif %}
            <button class="gcb-button gcb-pull-right" type="submit">{{ action.caption }}</button>
          </form>
          {% endif %}
        {% endfor %}
        {% if section.actions %}
          <div style='clear: both; padding-top: 2px;' />
        {% endif %}
        <h3>{{ section.title }}</h3>
        {% if section.description %}
          <p class="description">
            {{ section.description }}
          </p>
        {% endif %}
        {% if section.pre %}
          {{ section.pre }}
        {% elif can_highlight_code and section.code %}
          <code class="codemirror-container-readonly" mode={{section.mode}}>{{ section.code }}</code>
        {% else %}
          <ol>
            {% if not section.children %}
            &lt; none &gt;
            {% endif %}
            {% for item in section.children %}
            <li>{{ item }}</li>
            {% endfor %}
          </ol>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% if can_highlight_code %}
      <script>
        CodeMirror.modeURL = "/static/codemirror/mode/%N/%N.js";
        $('.codemirror-container-readonly').each(function() {
          var code = $(this).text();
          $(this).empty();
          var cmInstance = CodeMirror(this, {
            value: code,
            lineNumbers: true,
            readOnly: true
          });
          var mode = this.getAttribute('mode');
          cmInstance.setOption("mode", mode);
          CodeMirror.autoLoadMode(cmInstance, mode);
        });
      </script>
    {% endif %}
    {% endif %}
    {% if main_content %}
    <div id='gcb-main-content'>
        {{ main_content }}
    </div>
    {% endif %}
    <div id='modal-window'>
      <div id='modal-background'></div>
      <div id="modal-container">
        <button class="close-button">X</button>
        <div id='question-preview'></div>
        <div id="add-to-group">{% include 'add_to_group.html' %}</div>
      </div>
    </div>
    {% include 'question_filter.html' %}
  </div>
  <div id='gcb-footer'>
    Application {{ application_id }} version {{ application_version }}
    &nbsp;|&nbsp;
    Powered by
    <a target='_blank' href="https://code.google.com/p/course-builder/">
      Course Builder</a> {{ coursebuilder_version }}
    as distributed under
    <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">
      Apache License Version 2.0
    </a>
    &nbsp;|&nbsp;
    {{ page_footer }}
  </div>
  </body>
</html>
